<template>
  <div class="app-container">
    <!--    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />-->
    <div class="tree">
      <el-tree
        ref="tree2"
        :data="data2"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        default-expand-all
        @node-click="handleNodeClick"
      />
    </div>
    <div class="table">
      <div style="display:flex">
        <el-button type="primary" size="mini" @click="handAdd">新增</el-button>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item>{{breadcrumb1}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{breadcrumb2}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column width="50" label="序号" type="index"></el-table-column>
        <el-table-column prop="date" label="编号"></el-table-column>
        <el-table-column prop="rule" label="规则表达式">
          <template slot-scope="scope">
            <span v-if="scope.row.rule=='>'">大于</span>
            <span v-else-if="scope.row.rule=='='">等于</span>
            <span v-else-if="scope.row.rule=='<'">小于</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              inactive-value="N"
              active-value="Y"
              active-text="是"
              inactive-text="否"
              @change="change"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="总分"></el-table-column>
        <el-table-column prop="address" label="描述" width="60"></el-table-column>
        <el-table-column prop="address" label="操作">
          <el-link type="primary" plain @click="handEdit">编辑</el-link>
          <el-link type="primary" plain @click="handEdit">删除</el-link>
          <el-link type="primary" plain @click="handEdit">维度配置</el-link>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "monitorconfig",

  data() {
    return {
      filterText: "",
      breadcrumb1: "",
      breadcrumb2: "",
      node: null, //缓存二级菜单
      data2: [
        {
          id: 1,
          label: "组织",
          children: [
            {
              id: 4,
              label: "个人",
              // children: [
              //   {
              //     id: 9,
              //     label: "Level three 1-1-1",
              //   },
              // ],
            },
            {
              id: 5,
              label: "小组",
            },
          ],
        },
        {
          id: 2,
          label: "工作项",
          children: [
            {
              id: 5,
              label: "用户故事",
            },
          ],
        },
        {
          id: 3,
          label: "系统",
          children: [
            {
              id: 7,
              label: "系统",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [
        {
          date: "2016-05-02",
          rule: ">",
          status: "N",
        },
        {
          date: "2016-05-04",
          rule: "=",
          status: "Y",
        },
        {
          date: "2016-05-01",
          rule: "<",
          status: "Y",
        },
        {
          date: "2016-05-03",
          rule: ">",
          status: "N",
        },
      ],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    },
  },

  methods: {
    handleNodeClick(node, e) {
      console.log(e, "yyy");
      this.breadcrumb1 = e.parent.data.label;
      this.breadcrumb2 = e.data.label;
    },
    handAdd() {},
    handEdit() {},
    change(){},
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  margin: 10px;
  display: flex;
  background-color: #f0f2f5;
}

.tree {
  width: 14%;
  background-color: #fff;
  height: calc(100vh - 110px);
}

.table {
  width: 85%;
  background-color: #fff;
  padding: 10px;
  margin-left: 1%;
}
</style>
